<template>
  <div class="graphic">
    <div class="graphic-header">
      <div class="title">{{ datas.title }}</div>
      <div class="desc">{{ datas.desc }}</div>
    </div>
    <div class="graphic-body">
      <div class="graphic-arrange">
        <div class="label">排列方式</div>
        <el-radio-group
          v-model="datas.form.arrange_type"
          @input="handleArrangeChange"
        >
          <el-radio
            v-for="item in arrangeList"
            :key="item.label"
            :label="item.label"
          >
            {{ item.title }}
          </el-radio>
        </el-radio-group>
      </div>
      <div
        v-for="(item, index) in datas.form.source_list"
        :key="index"
        class="graphic-item"
      >
        <div class="banner-item__close">
          <!-- 删除 -->
          <i class="el-icon-close" @click="handleDelete(index)"></i>
        </div>
        <div class="graphic-item__card">
          <div class="img-uploader" @click="chooseImage(item)">
            <div v-if="item.url" class="img-uploader-card">
              <el-image :src="item.url" class="img-uploader-img"></el-image>
              <div class="img-uploader-btn">重新上传</div>
            </div>
            <div v-else class="img-uploader-card">
              <i class="el-icon-plus img-uploader-icon"></i>
              <div class="img-uploader-text">上传图片</div>
            </div>
          </div>
          <div class="graphic-item__right">
            <div class="graphic-item__form">
              <div class="text">名称</div>
              <el-input
                v-model="item.title"
                type="text"
                placeholder="输入名称"
                size="small"
                maxlength="6"
                show-word-limit
              ></el-input>
            </div>

            <!-- 链接来源 -->
            <div class="graphic-item__form">
              <div class="text">链接来源</div>
              <el-select v-model="item.source" placeholder="选择链接来源" @change="handlerChangeSource(item)">
                <el-option
                  v-for="option in sourceOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option>
              </el-select>
            </div>

            <!-- 跳转功能 -->
            <div v-if="item.source == 1" class="graphic-item__form">
              <div class="text">选择功能</div>
              <el-select v-model="item.source_data" placeholder="选择跳转功能">
                <el-option
                  v-for="option in sourceDataOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option>
              </el-select>
            </div>

            <!-- 选择分类 -->
            <div v-else-if="item.source == 2" class="graphic-item__form">
              <div class="text">选择分类</div>
              <el-select v-model="item.source_data" placeholder="选择跳转分类">
                <el-option
                  v-for="option in categoryOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                >
                </el-option>
              </el-select>
            </div>

            <!-- 跳转功能 -->
            <div v-else-if="item.source == 3" class="graphic-item__form">
              <div class="text">链接地址</div>
              <el-input
                v-model="item.source_data"
                type="text"
                placeholder="输入跳转的链接地址"
                size="small"
              ></el-input>
            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="graphic-footer">
      <el-button type="primary" size="small" @click="handleAdd">
        <i class="el-icon-plus" />添加
      </el-button>
    </div>
    <!-- 选择图片 start -->
    <choose-image
      v-if="chooseImageVisible"
      :value.sync="currentItem.icon_id"
      field="icon_id"
      :form-datas="currentItem"
      :view="false"
      @close="closeChooseImage"
      @changeAttach="setCurrentItemAttach"
    ></choose-image>
    <!-- 选择图片 end -->
  </div>
</template>

<script>
import ChooseImage from '@/pages/material/choose/image.vue';
import { mapGetters } from 'vuex'

export default {
  name: 'TopNavsStyle',
  components: {
    ChooseImage
  },
  props: {
    datas: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      arrangeList: [
        {
          label: 3,
          title: '1排3个'
        },
        {
          label: 4,
          title: '1排4个'
        },
        {
          label: 5,
          title: '1排5个'
        }
      ],
      sourceOptions: [
        {
          label: '常用功能',
          value: 1
        },
        {
          label: '课程分类',
          value: 2
        },
        {
          label: '外部链接',
          value: 3
        }
      ],
      featureOptions: [
        {
          label: '考试',
          value: 1
        },
        {
          label: '讲师',
          value: 2
        },
        {
          label: '资讯',
          value: 3
        },
        {
          label: '商城',
          value: 4
        },
        {
          label: '学友圈',
          value: 5
        }
      ],
      featureMhmOptions: [
        {
          label: '机构',
          value: 6
        }
      ],
      categoryOptions: [],
      chooseImageVisible: false,
      currentItem: {}
    }
  },
  computed: {
    ...mapGetters('login', ['mhmId']),
    sourceDataOptions() {
      if (this.mhmId === 1) {
        return [].concat(this.featureOptions).concat(this.featureMhmOptions)
      }

      return this.featureOptions
    }
  },
  created() {
    this.getCategoryCascader()
  },
  methods: {
    // 添加
    handleAdd() {
      const item = {
        url: '',
        icon_id: 0,
        title: '图文导航',
        source: 1,
        source_data: ''
      }
      if (this.datas.form.source_list.length < 10) {
        this.datas.form.source_list.push(item)
      } else {
        this.$message.info('最多只能添加10个')
      }
    },

    // 删除
    handleDelete(index) {
      if (this.datas.form.source_list.length > this.datas.form.arrange_type) {
        this.datas.form.source_list.splice(index, 1)
      } else {
        this.$message.info(`默认显示${this.datas.form.arrange_type}个`)
      }
    },

    // 排列方式变化时
    handleArrangeChange(val) {
      const item = {
        url: '',
        icon_id: 0,
        title: '图文导航',
        source: 1,
        source_data: ''
      }

      const naviList = []
      for (let i = 0; i < val; i++) {
        naviList.push({ ...item })
      }

      this.datas.form.source_list = naviList // Array.apply(null, { length: val }).map(_ => item)
    },
    // 显示选择图标弹出层
    chooseImage(item) {
      this.currentItem = item
      this.chooseImageVisible = true
    },
    // 隐藏选择图标弹出层
    closeChooseImage() {
      this.chooseImageVisible = false
    },
    // 设置选中的图标
    setCurrentItemAttach({ url, id }) {
      this.currentItem.url = url
      this.currentItem.icon_id = id
    },
    // 获取分类树形结构
    getCategoryCascader() {
      this.$http.get(
          '/course/admin/category/cascader',
          {},
          ({ data }) => {
            console.log(data)
            this.categoryOptions = data
          },
          _ => {},
          false
      );
    },
    // 切换链接来源
    handlerChangeSource(item) {
      item.source_data = ''
    }
  }
}
</script>
<style scoped lang="scss">
.graphic {
  padding-top: 20px;
  padding-left: 24px;
  padding-right: 34px;

  &-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      line-height: 24px;
    }

    .desc {
      margin-top: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 16px;
    }
  }

  &-body {
    margin-top: 20px;

    .graphic-arrange {
      display: flex;
      align-items: center;

      .el-radio {
        margin-right: 15px;
      }

      .el-radio:last-child {
        margin-right: 0;
      }

      .label {
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        line-height: 16px;
        margin-right: 15px;
      }
    }

    .graphic-item {
      padding: 15px 0;
      border-bottom: 1px dashed #ebeef5;
      position: relative;
    }

    .banner-item__close {
      margin-bottom: 10px;
      display: flex;
      justify-content: flex-end;

      .el-icon-close {
        color: #8c8c8c;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .graphic-item__card {
      display: flex;

      .img-uploader {
        cursor: pointer;
        width: 82px;
        height: 82px;
        background: #f7f7f7;
        margin-right: 10px;
        overflow: hidden;
      }

      .img-uploader-card {
        width: 82px;
        height: 82px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .img-uploader-btn {
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 27px;
        text-align: center;
        width: 69px;
        height: 27px;
        border-radius: 15px;
        border: 1px solid #ffffff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .img-uploader-img {
        display: block;
        width: 210px;
        height: 81px;
      }

      .img-uploader-icon {
        font-size: 18px;
        color: #b5b5b6;
      }

      .img-uploader-text {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #b5b5b6;
        line-height: 14px;
      }

      .el-radio {
        padding: 5px 0;
      }
    }

    .graphic-item__right {
      flex: 1;
      min-width: 0;
    }

    .graphic-item__form {
      display: flex;
      align-items: center;

      .text {
        font-size: 14px;
        font-weight: 400;
        color: #303133;
        margin-right: 10px;
      }

      .el-input {
        flex: 1;
      }

      .el-select {
        flex: 1;
      }
    }

    .graphic-item__form + .graphic-item__form {
      margin-top: 10px;
    }
  }

  &-footer {
    padding: 20px 0;

    .el-button {
      width: 100%;
    }
  }
}
</style>
